<template>
  <div class="box">
    <aside-box>
      <template #zh> 柱状图 </template>
      <template #en> bar chart </template>
      <div class="bar" ref="barRef"></div>
    </aside-box>
  </div>
</template>

<script lang="ts" setup>
import asideBox from "@/components/asideBox";
import * as echarts from "echarts";

const option = {
  tooltip: {
    trigger: "axis",
    axisPointer: { type: "shadow" },
  },
  grid: {
    left: "3%",
    right: "0",
    bottom: "2%",
    top: "10%",
    containLabel: true,
  },
  xAxis: [
    {
      type: "category",
      data: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
      axisTick: {
        show: false,
      },
      axisLine: { show: false },
      axisLabel: {
        show: true,
        textStyle: {
          color: "rgba(255,255,255,.5)",
        },
      },
    },
  ],
  yAxis: [
    {
      type: "value",
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: "rgba(255,255,255,.5)",
        },
      },
      axisTick: {
        show: false,
      },
      splitNumber: 3,
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,.05)",
        },
      },
    },
  ],
  series: [
    {
      type: "pictorialBar",
      symbol: "path://M35,0L35,70L0,70z M35,0L35,70L70,70z",
      data: [20, 50, 80, 58, 183, 68, 57, 80, 142, 66, 42, 66],
      barWidth: "40%", //柱子宽度

      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: "#173f9a",
            },
            {
              offset: 0.5,
              color: "#173f9a",
            },
            {
              offset: 0.5,
              color: "#247ed1",
            },
            {
              offset: 1,
              color: "#247ed1",
            },
          ]),
          opacity: 1,
        },
      },
    },
  ],
};

const [barRef] = useEcharts(option);
</script>

<style lang="scss" scoped>
.box {
  background: rgb(8, 32, 63);
  .bar {
    width: 100%;
    height: 200px;
  }
}
</style>